<template>
	
	<view class="wrapper redeemWrapper">
	    <view class="contain" style="width: 750rpx; height: 609rpx; display: block; box-sizing: border-box;">
	        <view class="mainWrap">
	            <view class="inputP">
	                <input v-model="key" class="input" placeholder="请输入卡密" placeholderClass="placeholder-class" style="width: 644rpx; height: 109rpx; display: block; box-sizing: border-box; left: NaNrpx; top: NaNrpx;line-height: 109rpx;"></input>
	            </view>
	            <view class="button-redeem" :class="key==''?'':'active'">
	                <view @click="duihuan()" class="text">确认兑换</view>
	            </view>
	        </view>
	        <view class="descriptWrap">
	            <view class="titlebar">使用说明</view>
	            <view class="terms">
	                <view class="term">1.卡密可以兑换、会员，可以从购买、活动等途径获得</view>
	                <view class="term">2.会员可以免广告,无需等待看广告</view>
	                <view class="term">3.卡密不限用户，仅能兑换一次</view>
	                <view class="term">4.未使用的卡密长期有效</view>
	                <view class="term">5.卡密兑换后立即到账，在已有的基础上可延续使用时长</view>
	                <view class="term"  style="color: red;">6.免费去水印</view>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script>
	import {
		keyPay
	} from "@/api/api.js"
	export default {
		data() {
			return {
				key: null,
				sysConfig: uni.getStorageSync("appUser"),
			}
		},
		methods: {
			duihuan(){
				var that = this
				if(this.key){
					uni.showModal({
					        title: '温馨提示',
					        content: '是否确认兑换？',
					        cancelText: "取消",
					        confirmText: "确认",
					        confirmColor:'#ffa500',
					        cancelColor:'#000000',
					        success: function(res) {
					        if (res.confirm) {
					            // 执行确认后的操作
								keyPay({
									userId: that.sysConfig.userId,
									key: that.key
								}).then(response => {
									if(response.data == 1){
										uni.showModal({
										        title: '温馨提示',
										        content: '恭喜！兑换成功！',
												showCancel: false,
										        confirmText: "确认",
										        confirmColor:'#ffa500',
										        cancelColor:'#000000',
										        success: function(res) {
										    }
										})
									}else if(response.data == 2){
										uni.showModal({
										        title: '系统提示',
										        content: '您输入的卡密已被使用！',
												showCancel: false,
										        confirmText: "确认",
										        confirmColor:'red',
										        cancelColor:'#000000',
										        success: function(res) {
										    }
										})
									}else{
										uni.showModal({
										        title: '系统提示',
										        content: '您输入的卡密不存在！',
												showCancel: false,
										        confirmText: "确认",
										        confirmColor:'red',
										        cancelColor:'#000000',
										        success: function(res) {
										    }
										})
									}
									
								})
								that.key = null
					        } else {
					            // 执行取消后的操作
								
					        }
					    }
					})
				}
			}
		}
	}
</script>

<style lang="scss">

page {
    background-color: #fff;
}

.titlebar {
    font-size: 14px;
    font-weight: 700;
    line-height: 1em;
    padding: 10px 0 15px;
}

.redeemWrapper .contain {
    margin-bottom: 12rpx;
    margin-top: 24rpx;
    padding: 24rpx;
}

.redeemWrapper .mainWrap {
    margin-bottom: 100rpx;
    padding: 0 30rpx;
}

.redeemWrapper .mainWrap .inputP {
    font-size: 30rpx;
    margin-top: 140rpx;
    padding-bottom: 70rpx;
}

.redeemWrapper .mainWrap .inputP .input {
    border-bottom: 1rpx solid #e3e3e3;
    color: #474747;
    line-height: 1em;
    overflow: scroll;
    padding: 30rpx 0;
    text-align: center;
}

.redeemWrapper .mainWrap .placeholder-class {
    color: #bbb;
    padding: 10px 0;
}

.redeemWrapper .mainWrap .clearBtn {
    padding: 15px 0;
}

.redeemWrapper .mainWrap .clearBtn .text {
    color: #1f2141;
    font-size: 28rpx;
    text-align: center;
}

.redeemWrapper .mainWrap .button-redeem {
    background-color: #d9d9d9;
    border-radius: 6px;
    overflow: hidden;
    padding: 15px 0;
    text-align: center;
}

.redeemWrapper .mainWrap .button-redeem .text {
    color: #fff;
    font-size: 16px;
    line-height: 1em;
}

.redeemWrapper .mainWrap .button-redeem.active {
    background-color: #fc6839;
}

.redeemWrapper .descriptWrap {
    padding: 0 15px;
}

.redeemWrapper .descriptWrap .terms .term {
    color: #828386;
    font-size: 24rpx;
    line-height: 2em;
    padding-bottom: 5px;
}

.ad {
    border-radius: 10rpx;
    margin: 330rpx 40rpx 0;
    overflow: hidden;
}

.information {
    background-color: #fff;
    border-radius: 16rpx;
    display: flex;
    margin: 26rpx 24rpx 0;
    padding: 48rpx 4rpx 58rpx;
}
</style>
